<template>
      <div class="warpper-box">
    <div class="inner_box">
        <el-button type="primary" size="small" style="margin-bottom: 15px;" @click="add()">新增</el-button>
        <el-table :data="this.tableData" ref="table" border stripe>
            <el-table-column label="序号" width="80" center :index="1">
            <template #default="scope">
                {{ scope.$index + 1 }}
            </template>
            </el-table-column>
            <el-table-column prop="name" label="驳回信息">
                <template slot-scope="scope">
                    <template v-if="scope.row.state">
                        <el-input v-model="scope.row.name" size="mini" />
                    </template>
                    <template v-else>{{ scope.row.name }}</template>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" v-if="!scope.row.state" size="mini" @click="edit(scope.row)">修改</el-button>
                    <el-button type="primary" v-if="scope.row.state" size="mini" @click="submit(true,scope.row)">保存</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    </div>
</template>
<script>
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import { systemSupplierInfoSave,getDetailByKey} from "@/api/about_api";
import { getCurrentTime } from "@/utils/index";
export default {
    data() {
        return {
            tableData: [],
            idx:''
        }
    },
    mounted() {
        this.getInfo();
    },
    methods: {
        async getInfo() {
            const { code, data } = await getDetailByKey('rkbh');
            if (code === 200) { 
                if (data) {
                    this.idx = data.id
                    if (data.value) {
                        let arr = JSON.parse(data.value)
                        arr.forEach(v => {
                            v.state = false
                        })
                        this.tableData = arr
                    }
                }
            }
        },
        add() {
            let param = {}
            param.name = ''
            param.createTime = getCurrentTime()
            param.state = true
            this.tableData.push(param)
        },
        edit(row) {
            row.state = true
        },
        del(row) {
            const index = this.tableData.indexOf(row)
            if (index >= 0) {
                this.tableData.splice(index, 1)
                this.submit(false)
            }
        },
        async submit(flag,row) {
             if (flag == true) {
                if (!row.name) {
                    this.$message.error('请输入驳回信息')
                    return
                }
                let isList = this.tableData.map(v => {
                    if (!v.state) {
                        return v.name
                    }
                })
                if (isList.includes(row.name)) {
                    this.$message.error('驳回信息不能重复')
                    return
                }
            }
            let param = {}
            param.key = 'rkbh'
            param.id = this.idx
            param.value = JSON.stringify(this.tableData)
            let arr = [param]
            const { code } = await systemSupplierInfoSave(arr);
            if (code === 200) {
                this.getInfo();
            }
        }
    }
}
</script>
<style scoped>

</style>